function Swiper(el){
    // 保存数据
    this.el = document.querySelector(el)
    this.t=null
    this.num=1
    // 启动
    this.init()
}
Swiper.prototype.init = function(){
    // 自动切换轮播图
    this.autoplay()
    // 分页器移入
    this.pageOver()
    // 分页器移出
    // this.pageOut()
}

// 一、每隔1s自动播放
Swiper.prototype.autoplay=function(){
    // 1 定时器num默认1
    // let num = 1
    // 2 定时器
    this.t=setInterval(()=>{
        // 3 num++
        this.num++
        // 4 num过滤最大是6
        if(this.num>6) this.num=1
        // 5 同步显示图片
        this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
        // 6 同步显示分页器
        this.page(this.num)
   },1000)     
}

Swiper.prototype.page=function(num){
    // 6.1 取消已有的class
    this.el.querySelector('ul li.active').className = ''
    // 6.2 给当前图片名num 对应的分页器加class
    this.el.querySelectorAll('ul li')[num-1].className = 'active'
}

// 二、鼠标移入
Swiper.prototype.pageOver=function(){
    // 1 获取所有分页器
    let pageObjs=this.el.querySelectorAll('ul li')
    // 2 遍历
    pageObjs.forEach((item,i)=>{
    // item就是每个li标签对象
        // 3 挨个绑定鼠标移入事件
        item.onmouseover=()=>{
            // 3.1 清除定时器
            clearInterval(this.t)
            // 3.2 同步图片、同步索引 
            this.el.querySelector('img').src=`./imgs/img${i+1}.jpg`
            this.num=i+1
            // 3.3 同步分页器
            this.page(this.num)
         } 
        // 4 挨个绑定鼠标移出事件
        item.onmouseout=()=>{
            // this.pageOut()
            this.autoplay()
        }   
    })
}

// 三、鼠标移出
// Swiper.prototype.pageOut=function(){
//     this.autoplay()
// }
